<template>
  <div class="app-container">
    <div class="orange-box">
      请下载模板 <font style="color: red; font-weight: bold">#模板1</font> ，并按提示填充后，再提交

      <el-button icon="el-icon-download" type="primary" size="small">
        <a href="http://www.basegps.com/carweb2/v3/static/doc/demo.xls" style="color: #fff">下载</a>
      </el-button>
    </div>
    <div style="margin: 10px">
      <file-upload :ref="getChildren" accept="application/vnd.ms-excel" @select-file="onUploadFile"></file-upload>
    </div>

    <!-- table数据 -->
    <div class="body-content">
      <h3>大唐盛世</h3>
      <div class="btn-cont" style="margin-bottom: 10px">
        <el-button type="primary" icon="el-icon-download" size="small" @click="exportExecl">导出</el-button>
        <el-button type="primary" icon="el-icon-download" size="small" @click="exportExecl('all')">导出全部</el-button>
      </div>
      <el-table border v-loading="listLoading" fit highlight-current-row :data="tableList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <!-- <el-table-column label="序号" sortable="custom" align="center" width="80" prop="id">
          <template #default="{ row }">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column> -->
        <!-- 名称 -->
        <el-table-column prop="name" label="名称" width="150px" align="center">
          <template #default="{ row }">
            <span class="link-type">{{ row.plate_name }}</span>
          </template>
        </el-table-column>
        <!-- 车牌 -->
        <el-table-column label="车牌" min-width="150px" align="center">
          <template #default="{ row }">
            <span class="link-type">{{ row.plateNumbers }}</span>
          </template>
        </el-table-column>
        <!-- 电话号码 -->
        <el-table-column label="电话号码" min-width="150px" align="center">
          <template #default="{ row }">
            <span class="link-type">{{ row.phone }}</span>
          </template>
        </el-table-column>
        <!-- 运动 -->
        <el-table-column label="运动" min-width="150px" align="center">
          <template #default="{ row }">
            <span class="link-type">{{ row.sport }}</span>
          </template>
        </el-table-column>
        <!-- 备注 -->
        <el-table-column label="备注" width="150px" align="center">
          <template #default="{ row }">
            <span class="link-type">{{ row.remark }}</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template #default="{ row }">
            <el-button type="primary" size="mini"> 编辑 </el-button>
            <el-button size="mini" type="danger"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import { reactive, toRefs, ref, onMounted, onUpdated } from "vue";
  import FileUpload from "@/components/FileUpLoad.vue";
  import ExportUtil from "@/utils/exportUtil"; //file-saver
  import { export_json_to_excel } from "@/vendor/Export2Execl.js"; //file-saver-fixed

  export default {
    name: "FileToExecl",
    components: {
      "file-upload": FileUpload,
    },
    setup(props, context) {
      console.log(props, context);
      const state = reactive({
        tableList: [],
        selectList: [],
      });
      const getChildren = ref(null);
      const onUploadFile = (files) => {
        ExportUtil.parseExcel(files[0], dealExcel);
      };
      const dealExcel = (result) => {
        // var list = [];
        // for (let i = 0; i < result.length; i++) {
        //   var item = result[i];
        //   list.push({ name: item.plate_name, plateNum: item.plateNumbers, phone: item.phone, sport: item.sport, remark: item.remark });
        // }
        state.tableList = result;
      };
      const exportExecl = (tag) => {
        // console.log(tag);
        const tHeader = ["plateNumbers", "plate_name", "phone", "sport", "remark"];
        const filterVal = ["plateNumbers", "plate_name", "phone", "sport", "remark"];
        var data = formatJson(filterVal, state.tableList);
        //
        if (tag == "all") {
          // console.log("data", data);
          export_json_to_excel({
            header: tHeader,
            data,
            filename: "zenos属所有",
          });
        } else {
          data = formatJson(filterVal, state.selectList);
          export_json_to_excel({
            header: tHeader,
            data,
            filename: "zenos属所有",
          });
        }
      };
      const formatJson = (filterVal, list) => {
        // 转成数组中包含数组的形式
        return list.map((v) =>
          filterVal.map((j) => {
            return v[j];
          })
        );
      };
      const handleSelectionChange = (val) => {
        state.selectList = val;
      };
      onMounted(() => {
        console.log("onMounted");
      });
      onUpdated(() => {
        console.log("onUpdated");
      });
      return {
        ...toRefs(state),
        onUploadFile,
        getChildren,
        exportExecl,
        handleSelectionChange,
      };
    },
  };
</script>
